<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <%
        String path = request.getContextPath();
        String basePath = request.getScheme() + "://"
                + request.getServerName() + ":" + request.getServerPort()
                + path;
    %>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>登录</title>
    <!-- Bootstrap 核心 CSS 文件https://git.oschina.net/cbyh1313/photoShareProject1.git-->
    <link href="../resources/package/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- 在bootstrap.min.js 之前引入 -->
    <script src="../resources/package/jquery/jquery-3.1.1.min.js"></script>
    <!-- Bootstrap 核心 JavaScript 文件 -->
    <script src="../resources/package/bootstrap/js/bootstrap.min.js"></script>
    <!--jquery.validate-->
    <script type="text/javascript" src="../resources/login/js/jquery.validate.min.js"></script>
    <script type="text/javascript" src="../resources/package/layer/layer.js"></script>
    <style type="text/css">
        html, body {
            width: 100%;
            height: 100%;
            position: relative;
            font-size: 15px;
            line-height: 1.4;
            background: #e2e3ed;
            font-family: "微软雅黑 Light";
        }

        .backGroundImg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            -webkit-filter: blur(3px);
            opacity: 0.9;
        }

        .wrapper {
            margin: 0 auto 0;
            padding: 80px 15px 0 15px;
        }

        .form {
            position: relative;
            max-width: 380px;
            min-width: 280px;
            margin: 0 auto;
            padding: 20px 40px 20px 40px;
            border-radius: 2px;
            background: rgba(0, 0, 0, 0.7);
            color: #ffffff;
        }

        .loginName {
            position: absolute;
            top: 40px;
            right: 40px;
            color: #ffffff;
            font-size: 19px;
            font-weight: 500;
        }

        #login_form {
            display: block;
        }

        .form-group {
            margin: 0 0 0 0;
        }

        .form-control {
            line-height: 30px;
            border-radius: 2px;
        }

        .error {
            width: 100%;
            margin-bottom: 0;
            color: #ff6148;
            font-size: 13px;
            font-weight: 700;
        }

        .check {
            position: relative;
            margin-top: 20px;
            height: 47px;
            line-height: 34px;
        }

        .checkImg {
            position: absolute;
            top: -8px;
            right: 0;
            margin-top: 0;
            width: 35%;
        }

        .checkImg img {
            height: 30px;
        }

        .form-group .checkI {
            position: absolute;
            top: 16px;
            left: 5px;
            margin-top: -15px;
            width: 8%;
            z-index: 3;
        }

        .checkNum {
            position: absolute;
            margin-top: -8px;
            width: 55%;
            line-height: 1.42857143;
        }

        .check label {
            position: absolute;
            top: 23px;
            left: 0;
        }

        .buttonOperate {
            margin-top: 5px;
            padding: 4px 10px;
            border-radius: 2px;
        }

        .detailInfo a {
            color: #00b0f6;
        }

        .pull-left, .pull-left:hover, .pull-right, .pull-right:hover {
            background: #ffffff;
            color: #0a0a0a;
        }

        #register_form {
            display: none;
        }

        .fa {
            display: inline-block;
            top: 27px;
            left: 6px;
            position: relative;
            color: #ccc;
        }

        input[type="text"], input[type="password"] {
            padding-left: 26px;
        }

        .checkbox {
            padding-left: 21px;
        }
    </style>
</head>
<body>
<img class="backGroundImg" src="../resources/login/img/backgroundImg.jpg">
<div class="wrapper">
    <div class="form row">
        <form class="" id="findPassword_form" action="<%=basePath%>/user/findPassword" method="post">
            <h3 class="form-title">图片分享系统</h3>
            <div class="loginName">邮箱找回密码</div>
            <div class="form-group">
                <i class="fa glyphicon glyphicon-user"></i>
                <input class="form-control required" type="text" placeholder="账号" name="account"
                       autofocus="autofocus" maxlength="20"/>
                <input type="hidden" name="isAdmin" value="${isAdmin}">
            </div>
            <div class="form-group">
                <i class="fa glyphicon glyphicon-envelope"></i>
                <input class="form-control email" type="text" placeholder="邮箱" name="email" value="${email}"/>
            </div>
            <div class="form-group check">
                <a href="<%=basePath%>/login" class="checkImg"><img alt="验证码" src="<%=basePath%>/Kaptcha.jpg" style="float:right;width:100%"></a>
                <i class="fa glyphicon glyphicon-ok checkI"></i>
                <input type="text" class="form-control required checkNum" name="verifyCode" placeholder="验证码"/>
                <label class="error verifyCode">${findPasswordMessage}</label>
            </div>
            <div class="form-group">
                <a href="<%=basePath%>/<c:if test="${isAdmin==false}">login</c:if><c:if test="${isAdmin==true}">adminLogin</c:if>">
                    <input type="button" class="btn btn-info pull-left buttonOperate" value="返回"/>
                </a>
                <input type="submit" class="btn btn-success pull-right buttonOperate" value="提交"/>
            </div>
        </form>
    </div>
</div>
<script type="text/javascript" src="../resources/login/js/main.js"></script>
</body>
</html>